<template>
  <div class="branch-page">
    <div class="content" v-if="details">
      <img :src="$store.state.baseUrl + details.aboutUsContent" alt="" />
      <div v-if="details.aboutUsRemark" style="margin:0 0 20px 0">
        <div v-html="filterText()" style="textAlign:left;marginTop:50px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/modules/home.js";
export default {
  data() {
    return {
      details: "",
    };
  },
  mounted() {
    api.getaboutUsDetail({ aboutUsId: 7 }).then((res) => {
      this.details = res.data;
    });
  },
  methods: {
    filterText() {
      let value = this.details.aboutUsRemark;
      if (value) {
        value = value.replace(/[\n]/gi, "<br/>");
        value = value.replace(/[\s]/gi, "&nbsp;");
        return value;
      } else {
        return value;
      }
    },
  },
};
</script>
<style lang="less">
.branch-page {
  margin: 64px 0;
  .content {
    img {
      width: 100%;
      height: 1080px;
      margin-bottom: 36px;
    }
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 16.6666%;
        display: flex;
        box-sizing: border-box;
        img {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }

        span {
          flex: auto;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>;
